<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet">
		<link href="css/index.css" rel="stylesheet"/>
		<style>
			.mui-bar {
				-webkit-box-shadow: none;
				box-shadow: none;
			}
			.myList img{
				vertical-align:middle;
				width: 30px;
				height: 30px;
			}
			.list-bar{
				position: fixed;
				right: 5px;
				z-index: 999;
			}
			.list-bar a{
				text-align: center;
				display: block;
				font-size: 12px;
				line-height: 18px;
				color: #222222;
			}
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav myHeader">
	    <h1 class="mui-title myTitle">通讯录</h1>
	</header>
		<div class="mui-content">
			<div id="list">
				<div class="mui-input-row mui-search" style="margin-top: 10px;">
					<input type="search" class="mui-input-clear" placeholder="">
					<span class="mui-icon mui-icon-clear mui-hidden"></span>
					<span class="mui-placeholder"><span class="mui-icon mui-icon-search"></span><span>搜索</span></span>
				</div>
				<div class="list-bar">
					<a href="#A">A</a>
					<a href="#B">B</a>
					<a href="#C">C</a>
					<a href="#D">D</a>
					<a href="#E">E</a>
					<a href="#F">F</a>
					<a href="#G">G</a>
					<a>H</a>
					<a>I</a>
					<a>J</a>
					<a>K</a>
					<a>L</a>
					<a>M</a>
					<a>N</a>
					<a>O</a>
					<a>P</a>
					<a>Q</a>
					<a>R</a>
					<a>S</a>
					<a>T</a>
					<a>U</a>
					<a>V</a>
					<a>W</a>
					<a>X</a>
					<a>Y</a>
					<a>Z</a>
				</div>
				<div class="list-inner">
					<ul class="mui-table-view myList">
						<li class="mui-table-view-cell" title="新的朋友"><img src='img/icon1.jpg'> 新的朋友</li>
						<li class="mui-table-view-cell" title="群聊"><img src="img/icon2.jpg"> 群聊</li>
						<li class="mui-table-view-cell" title="标签"><img src="img/icon3.jpg"> 标签</li>
						<li class="mui-table-view-cell" title="公众号"><img src="img/icon4.jpg"> 公众号</li>
						<li id="A" class="mui-table-view-divider">A</li>
						<li class="mui-table-view-cell" title="阿克"><img src='img/1.jpg'> 阿克</li>
						<li class="mui-table-view-cell" title="阿拉"><img src='img/2.jpg'> 阿拉</li>
						<li class="mui-table-view-cell" title="阿勒"><img src='img/3.jpg'> 阿勒</li>
						<li class="mui-table-view-cell" title="阿里"><img src='img/4.jpg'> 阿里</li>
						<li id="B" class="mui-table-view-divider">B</li>
						<li class="mui-table-view-cell" title="半边"><img src='img/5.jpg'> 半边</li>
						<li class="mui-table-view-cell" title="半个"><img src='img/6.jpg'> 半个</li>
						<li class="mui-table-view-cell" title="不安"><img src='img/7.jpg'> 不安</li>
						<li id="C" class="mui-table-view-divider">C</li>
						<li class="mui-table-view-cell" title="长白山"><img src='img/8.jpg'> 长白山</li>
						<li class="mui-table-view-cell" title="长龙嘉"><img src='img/9.jpg'> 长龙嘉</li>
						<li class="mui-table-view-cell" title="常花源"><img src='img/10.jpg'> 常花源</li>
						<li id="D" class="mui-table-view-divider">D</li>
						<li class="mui-table-view-cell" title="大妈"><img src='img/1.jpg'> 大妈</li>
						<li class="mui-table-view-cell" title="大姐"><img src='img/2.jpg'> 大姐</li>
						<li class="mui-table-view-cell" title="大哥"><img src='img/3.jpg'> 大哥</li>
						<li id="E" class="mui-table-view-divider">E</li>
						<li class="mui-table-view-cell" title="二笔"><img src='img/4.jpg'> 二笔</li>
						<li id="F" class="mui-table-view-divider">F</li>
						<li class="mui-table-view-cell" title="face"><img src='img/5.jpg'> face</li>
						<li id="G" class="mui-table-view-divider">G</li>
						<li class="mui-table-view-cell" title="桂桂"><img src='img/6.jpg'> 桂桂</li>
						<li class="mui-table-view-cell" title="gg"><img src='img/7.jpg'> gg</li>				
					</ul>
				</div>
			</div>
		</div>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();
			mui.ready(function() {
				mui('.mui-table-view').on('tap','.mui-table-view-cell',function(){
	  	      	 mui.openWindow({
	  	      	 	url:'subCharts.html',
	  	      	 	id:'subCharts.html',
	  	      	 	style:{},
	  	      	 	extras:{  
	  	      	 		title:this.getAttribute('title'),
	  	      	 	},
	  	      	 	show:{
	  	      	 		autoShow:true,  
	  	      	 		aniShow:'slide-in-right',
	  	      	 		duration:100 
	  	      	 	}
	  	      	 })
	  	    }) 
			});
		</script>
</body>
</html>
